<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>支分宝</title>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/swiper.min.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/base.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/home.css"/>
  <style>

    .fixed-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      background: white;
      box-shadow: 0 -0.02rem 0.1rem 0 rgba(222, 228, 234, 0.8);
      padding: 0 15px;
    }

    .fixed-bottom img {
      width: 34px;
      height: 34px;
    }

    .fixed-bottom .info {
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 34px;
      margin-left: 10px;
    }

    .info .info-top {
      color: #3B3B3B;
      font-size: 13px;
    }

    .info .info-bottom {
      color: #989898;
      font-size: 11px;
    }

    .btn-download {
      width: 70px;
      height: 29px;
      text-align: center;
      line-height: 29px;
      background: #F96B47;
      border-radius: 14.5px;
      color: #FFFFFF;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="app" v-cloak="">
  <!--  轮播图-->
  <div class="swiper-container swiper-container1" id="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="car in carousel">
        <img :src="car" alt="" onload="bannerImgLoader()">
      </div>
    </div>
  </div>
  <div class="btn-group">
    <div class="btn-top">
      <div class="item item1" @click="IntegralIndiana()">
        <img src="/static/admin/jingtaiwu/task2/jfdb.png" alt="">
      </div>
      <div class="item item2" @click="changeType(2)">
        <img src="/static/admin/jingtaiwu/task2/zhsh.png" alt="">
      </div>
    </div>
    <div class="btn-bottom">
      <div class="item item3" onclick="SOF()">
        <img src="/static/admin/jingtaiwu/task2/sjq.png" alt="">
      </div>
      <div class="item item4" @click="claify()">
        <img src="/static/admin/jingtaiwu/task2/jfxf.png" alt="">
      </div>
      <div class="item item5" @click="ShopAround()">
        <img src="/static/admin/jingtaiwu/task2/zbdp.png" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-container swiper-container2 banner swiper-no-swiping">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="info in winningInformation">
        <div class="left"><img src="/static/admin/jingtaiwu/task2/jfzj.png" alt="" style="width: 1.75rem;height: 1.88rem"></div>
        <div class="info">
          <img v-lazy="info.user_image" alt="" class="avatar left"
               onerror="this.src='/static/admin/jingtaiwu/main1/logo1.png'">
          <div class="main left">
            <div class="name">{{info.user_username}}</div>
            <div class="event">{{info.w_info}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--    人气推荐-->
  <div class="area1">
    <img src="/static/admin/jingtaiwu/task2/rqtj.png" alt="" class="logo" @click='more(10)'>
    <div class="list">
      <div class="item" v-for="item in manList" :key="item.p_id" @click="productDetail(item.p_id)">
        <div class="product-img">
          <img :src="item.p_banner.split(',')[0]" alt=""/>
        </div>
        <div class="product-info">
          <div class="product-name aui-ellipsis-2">
            <span class="tag" v-if="item.p_deliver_cate===1">全国包邮</span>
            <span class="tag" v-else-if="item.p_deliver_cate===2">到店自提</span>
            <span class="tag" v-else-if="item.p_deliver_cate===3">邮费{{item.p_postage}}元</span>
            <span class="tag" v-else-if="item.p_deliver_cate===4">到店消费</span>
            {{item.p_name}}
          </div>
          <div class="product-price flex items-center content-justify">
            <div class="flex items-base aui-ellipsis flex-1">
              <template v-if="item.p_type!==1">
                <img src="/static/admin/jingtaiwu/task2/jf.png" alt="" class="icon-money" style="display: inline-block">
                <span class="inline-flex items-base">
              <span class="price">{{item.p_jifen_price}}</span>
              <span class="unit">积分</span>
            </span>
              </template>
              <template v-if="item.p_type===3">
            <span class="inline-flex items-end">
              <span class="add">+</span>
            </span>
              </template>
              <template v-if="item.p_type!==2">
                <div class="inline-flex items-base">
                  <span class="unit">￥</span>
                  <span class="price">{{item.p_now_price}}</span>
                </div>
              </template>
            </div>
            <img src="/static/admin/jingtaiwu/task2/cart.png" alt="" class="icon-cart" @click.stop="addToCart(item)">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--    同城特惠-->
  <div class="area2">
    <div class="title-area flex items-center content-justify">
      <div class="name">同城特惠</div>
      <div class="more" @click="more(1)">
        <span>查看更多</span>
        <img src="/static/admin/jingtaiwu/task2/right2.png" alt="" class="icon-right">
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in city" :key="item.p_id" @click="productDetail(item.p_id)">
        <div class="product-img">
          <img :src="item.p_banner.split(',')[0]" alt=""/>
        </div>
        <div class="product-info">
          <div class="product-name aui-ellipsis-2">
            <span class="tag" v-if="item.p_deliver_cate===1">全国包邮</span>
            <span class="tag" v-else-if="item.p_deliver_cate===2">到店自提</span>
            <span class="tag" v-else-if="item.p_deliver_cate===3">邮费{{item.p_postage}}元</span>
            <span class="tag" v-else-if="item.p_deliver_cate===4">到店消费</span>
            {{item.p_name}}
          </div>
          <div class="product-price flex items-center content-justify">
            <div class="flex items-base aui-ellipsis flex-1">
              <template v-if="item.p_type!==1">
                <img src="/static/admin/jingtaiwu/task2/jf.png" alt="" class="icon-money" style="display: inline-block">
                <span class="inline-flex items-base">
              <span class="price">{{item.p_jifen_price}}</span>
              <span class="unit">积分</span>
            </span>
              </template>
              <template v-if="item.p_type===3">
            <span class="inline-flex items-end">
              <span class="add">+</span>
            </span>
              </template>
              <template v-if="item.p_type!==2">
                <div class="inline-flex items-base">
                  <span class="unit">￥</span>
                  <span class="price">{{item.p_now_price}}</span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <marquee-text :duration="60" v-if="roll.length>0">
    <div class="scroll-area">
      <div class="scroll-item" v-for="(ro,index) in roll" @click="linK(ro)">
        <div class="you">
          <div class="duo">
            <span>{{ro.ad_left_title}}</span>
          </div>
          <span class="ren1">{{ro.ad_right_title}}</span>
        </div>
        <img v-lazy="ro.ad_img" class="img">
      </div>
    </div>
  </marquee-text>
  <!--    今日特惠-->
  <div class="area3">
    <div class="title-area flex items-center content-justify">
      <div class="name">今日特惠</div>
      <div class="more" @click="more(2)">
        <span>查看更多</span>
        <img src="/static/admin/jingtaiwu/task2/right2.png" alt="" class="icon-right">
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in today" :key="item.p_id" @click="productDetail(item.p_id)">
        <div class="product-img">
          <img :src="item.p_banner.split(',')[0]" alt=""/>
        </div>
        <div class="product-info">
          <div class="product-name aui-ellipsis-2">
            <span class="tag" v-if="item.p_deliver_cate===1">全国包邮</span>
            <span class="tag" v-else-if="item.p_deliver_cate===2">到店自提</span>
            <span class="tag" v-else-if="item.p_deliver_cate===3">邮费{{item.p_postage}}元</span>
            <span class="tag" v-else-if="item.p_deliver_cate===4">到店消费</span>
            {{item.p_name}}
          </div>
          <div class="product-price flex items-center content-justify">
            <div class="flex items-base aui-ellipsis flex-1">
              <template v-if="item.p_type!==1">
                <img src="/static/admin/jingtaiwu/task2/jf.png" alt="" class="icon-money" style="display: inline-block">
                <span class="inline-flex items-base">
              <span class="price">{{item.p_jifen_price}}</span>
              <span class="unit">积分</span>
            </span>
              </template>
              <template v-if="item.p_type===3">
            <span class="inline-flex items-end">
              <span class="add">+</span>
            </span>
              </template>
              <template v-if="item.p_type!==2">
                <div class="inline-flex items-base">
                  <span class="unit">￥</span>
                  <span class="price">{{item.p_now_price}}</span>
                </div>
              </template>
            </div>
            <img src="/static/admin/jingtaiwu/task2/cart.png" alt="" class="icon-cart" @click.stop="addToCart(item)">
          </div>
        </div>
      </div>
    </div>
  </div>
  <marquee-text :duration="60" v-if="roll2.length>0">
    <div class="scroll-area">
      <div class="scroll-item" v-for="(ro,index) in roll2" @click="linK(ro)">
        <div class="you">
          <div class="duo">
            <span>{{ro.ad_left_title}}</span>
          </div>
          <span class="ren1">{{ro.ad_right_title}}人推荐</span>
        </div>
        <img v-lazy="ro.ad_img" class="img">
      </div>
    </div>
  </marquee-text>
  <!--    周围店铺-->
  <div class="area4">
    <div class="title-area items-center flex content-justify">
      <div class="name">周边店铺</div>
      <div class="more" @click="more(3)">
        <span>查看更多</span>
        <img src="/static/admin/jingtaiwu/task2/right2.png" alt="" class="icon-right">
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in shopList" :key="item.shop_id" @click="shopDe(item.shop_id)">
        <div class="shop-img">
          <img :src="item.shop_img" alt="">
          <div class="logo2" v-if="item.is_record>0"></div>
        </div>
        <div class="shop-info">
          <div class="shop-name">{{item.shop_name}}</div>
          <div class="stars">
            <img src="/static/admin/jingtaiwu/task2/star1.png" alt="" class="star" v-for="(it,index) in item.p_star" :key="index">
          </div>
          <div class="address aui-ellipsis">{{item.shop_address}}</div>
        </div>
        <div class="shop-more">
          <div class="distance">
            <img src="/static/admin/jingtaiwu/task2/dw.png" alt="" class="icon-location">
            <span>{{item.distance}}km</span>
          </div>
          <div class="count">{{item.shop_browse}}人进店</div>
          <div class="btn">进店逛逛</div>
        </div>
      </div>
    </div>
  </div>
  <div class="space" style="height: 58px"></div>
  <div class="fixed-bottom">
    <img src="https://jintianjifen.oss-cn-shanghai.aliyuncs.com/f53953806ed6e7296fc76890aff4b7c9.jpg" alt="">
    <div class="info">
      <div class="info-top">支分宝</div>
      <div class="info-bottom">支分宝享品质生活</div>
    </div>
    <div class="btn-download" onclick="tz()">立即下载</div>
  </div>
</div>
</body>
<script type="text/javascript" src="/static/admin/jingtaiwu/api.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/utils.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/MarqueeText.umd.min.js"></script>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script src="/static/admin/jingtaiwu/vue-extend.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/vue-lazyload.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/common1.js"></script>
<script>
  var vm;
  var address = {
    qu: getQueryVariable('qu') || 1197,
    lat: getQueryVariable('lat') || 39.95145,
    lon: getQueryVariable('lon') || 116.489931
  };
  window.onload = function () {
    Vue.use(VueLazyload)
    vm = new Vue({
      components: {
        'marquee-text': MarqueeText
      },
      el: '#app',
      data: {
        carousel: [],
        winningInformation: {},
        today: [],
        manList: [],
        roll: [],
        tabList: [],
        style1: {
          height: '6.1rem'
        },
        style2: {
          height: '6.1rem'
        },
      },
      methods: {
        // 广告跳转
        linK: function (ro) {
        },
        // 跳转周围店铺列表
        ShopAround: function () {
        },
        // 下单
        apiuserdoMathBtn: function () {
        },
        // 店铺详情
        commodityDetails: function (type) {
        },
        // 商品详情
        shopDe: function (type) {
        },
        // 更多
        more: function (type) {
        },
        // 全民创业
        FullEntrepreneurship: function () {
        },
        // 积分夺宝
        IntegralIndiana: function () {
        },
        // 商品列表以及以及周围店铺
        specialStar: function () {
          var _self = this;
          var data = {
            values: {
              qu: address.qu,
              lat: address.lat,
              lon: address.lon
            }
          };
          postAjax(ApiUrl.apiusertjGoods, data, function (ret, err) {
            if (ret) {
              _self.today = ret.msg.today;
              _self.city = ret.msg.city;
              _self.manList = ret.msg.man;
              _self.shopList = ret.msg.shop;
              // 动态修改图片为正方形
              _self.$nextTick(function () {
                // 动态修改商品详情缩略图为正方形
                var img = $api.offset($api.dom('.product-list .list .product-img'));
                if (img) {
                  _self.style1.height = img.w + 'px';
                }
                var img2 = $api.offset($api.dom('.product-list .list2 .product-img'));
                if (img2) {
                  _self.style2.height = img2.w + 'px';
                }
              });
            } else {
              console.log(JSON.stringify(err));
            }
          });
        },
        // 广告位1
        apiusergetAdvertiseList: function () {
          var _self = this;
          var data = {
            values: {
              port: 1,
              qu: address.qu,
              postion: 1
            }
          };
          postAjax(ApiUrl.apiusergetAdvertise, data, function (ret, err) {
            if (ret) {
              _self.roll = ret.msg;
            }
          });
        },
        // 广告位2
        apiusergetAdvertiseList1: function () {
          var _self = this;
          var data = {
            values: {
              port: 1,
              qu: address.qu,
              postion: 2
            }
          };
          postAjax(ApiUrl.apiusergetAdvertise, data, function (ret, err) {
            if (ret) {
              _self.roll2 = ret.msg;
            }
          });
        },
        // 获奖列表
        winningInformationStar: function () {
          var _self = this;
          var data = {
            values: {
              values: data
            }
          };
          postAjax(ApiUrl.apiusergetgetWinInfo, data, function (ret, err) {
            if (ret) {
              for (i in ret.msg) {
                if (ret.msg[i].user_image == null) {
                  ret.msg[i].user_image = _self.imgM;
                }
              }
              _self.winningInformation = ret.msg;
              _self.$nextTick(function () {
                if (!_self.mySwiper1) {
                  _self.mySwiper1 = new Swiper('.swiper-container2', {
                    loop: true,
                    slidesPerView: "auto",
                    direction: 'vertical',
                    loopAdditionalSlides: 1,
                    speed: 600,
                    autoplay: {
                      disableOnInteraction: false, //手动滑动之后不打断播放
                      delay: 2000
                    },
                    pagination: {
                      el: '.swiper-pagination'
                    },
                    on: {}
                  });
                }

              });
            } else {

            }
          });
        },
        // 分类
        claify: function () {
        },
        // 获取轮播图
        carouselStar: function () {
          var _self = this;
          var data = {
            values: {
              area: address.qu
            }
          };
          postAjax(ApiUrl.apiusergetBanner, data, function (ret, err) {
            if (err) {
              return;
            }
            if (ret.status == '200') {
              _self.carousel = ret.msg;
              _self.$nextTick(function () {
                if (!_self.mySwiper2) {
                  _self.mySwiper2 = new Swiper('.swiper-container1', {
                    loop: true,
                    slidesPerView: "auto",
                    observer: true,
                    observeParents: false,
                    observeSlideChildren: true,
                    loopAdditionalSlides: 1,
                    speed: 3000,
                    autoplay: {
                      disableOnInteraction: false, //手动滑动之后不打断播放
                      delay: 2000
                    },
                    pagination: {
                      el: '.swiper-pagination'
                    },
                    on: {}
                  });

                } else {
                  _self.mySwiper2.update();
                }

              });
            } else {
              console.log(JSON.stringify(err));
            }
          });
        }
      },
      filters: {
        // 富文本过滤
        richtextformat: function (value) {
          if (!value) return '暂无介绍';
          var arr = value.split(',,,,,');
          var arr1 = [];
          arr.forEach(function (value1) {
            if (value1.indexOf('<div>') == 0) {
              var str = value1.match(/<div>(\S*)<\/div>/)[1];
              arr1.push(str);
            }
          });
          return arr1.length > 0 ? arr1.join(',') : '暂无介绍';
        }
      },
      mounted: function () {
        this.winningInformationStar();
        this.carouselStar();
        this.apiusergetAdvertiseList();
        this.apiusergetAdvertiseList1();
        this.specialStar();
      }
    });
  };

  function bannerImgLoader() {
    $api.dom('.swiper-container1').style.height = $api.offset($api.dom('.swiper-container1 img')).h + 'px';
  }

  function SOF() {

  }

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/wei/id1468418168';
        } else {
          window.close();
        }
      }, 300);
    } else {
      window.setTimeout(function () {
        window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.kingsuper.jifenuser';
      }, 300);
    }
  }
</script>
</html>
